<template>
  <div>
  <xdh-map style="height:76vh">
    <xdh-map-track :routes="line1" :src="car" :steps="50"></xdh-map-track>
    <xdh-map-line
      :routes="line1"
      stroke-color="blue"
      :stroke-line-dash="[10]"
      :stroke-width="4"
    ></xdh-map-line>

  </xdh-map>
  </div>
</template>

<script>
  import 'xdh-map/lib/xdhmap.css'
  import { XdhMap, XdhMapTrack, XdhMapLine, XdhMapCircle } from 'xdh-map';

  export default {
    components: {
      XdhMap,
      XdhMapTrack,
      XdhMapLine,
      XdhMapCircle
    },
    data() {
      return {
        center: [120.0, 30.186209],
        car: require('@/assets/car.png'),
        line1: [
          [119.960972, 30.246209],
          [119.975288, 30.235707],
          [119.979764, 30.235124],
          [120.039173, 30.24337],
          [120.05753, 30.217952],
          [120.058055, 30.21669],
          [120.054571, 30.20782],
          [120.0525, 30.19384],
          [120.054734, 30.185295],
          [120.073708, 30.166286],
          [120.081231, 30.160251]
        ],
        passLine: [],
        toLine: [],
        position: []
      };
    },
    methods: {
      handleMove(routes, index) {
        this.passLine = routes.slice(0, index);
        this.toLine = routes.slice(index);
        this.position = routes[index];
      }
    },
    created() {}
  };
</script>